import { createStyles } from "utils";
import { Dimensions, PixelRatio } from "react-native";

import {
  RadiusMD,
  FontSizeMD,
  // ColorFontTitle,
  ColorFontBase,
  ColorPrimary,
  ColorFontTitle,
  MidTitleColor,
} from "theme";

const deviceWidth = Dimensions.get("window").width;

const styles = {
  root: {
    width: "100%",
    height: "100%",
  },
  top: {
    display: "flex",
    flexDirection: "row",
    paddingVertical: 16,
    paddingLeft: 30,
    borderBottomWidth: 1,
    borderColor: "#DFE4EB",
  },
  top1: {
    display: "flex",
    flexDirection: "row",
    paddingVertical: 16,
  },
  detailTop: {
    paddingHorizontal: 30,
    borderBottomWidth: 1,
    borderColor: "#DFE4EB",
  },
  detailText: {
    display: "flex",
    alignItems: "center",
  },
  title: {
    fontSize: 16,
    color: ColorFontTitle,
    // fontSize: 18,
    // color: ColorFontTitle,
    width: "80%",
    textAlign: "center",
  },
  mid: {
    width: "100%",
    marginTop: 2,
    marginBottom: 2,
    // paddingRight: 30,
  },
  subTitle: {
    color: ColorFontBase,
    fontSize: 16,
    marginBottom: 24,
    paddingLeft: 24,
  },
  group: {
    width: "100%",
    flexDirection: "column",
  },
  subGroup: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    width: "100%",
    height: 52,
  },
  text: {
    fontSize: FontSizeMD,
    marginTop: 5,
    color: MidTitleColor,
  },
  button: {
    backgroundColor: ColorPrimary,
    borderWidth: 0,
    width: 315,
    marginBottom: 20,
    borderRadius: RadiusMD,
  },
  uncheckedCircle: {
    width: 24,
    height: 24,
    borderRadius: 12,
    borderWidth: RadiusMD,
    borderColor: "rgb(192,195,202)",
  },
  divider: {
    width: deviceWidth,
    height: 2 / PixelRatio.get(),
    backgroundColor: "#D3D3D3",
  },
};

export default createStyles(styles);
